<template>
  <div class="device-manage-container" v-loading="loading">
    <div class="unit">单位：台</div>
    <div class="left-warp">
      <div class="chart-outer-warp">
        <div class="pie-value">
          <div class="nums">
            {{ Number(dataSource.total || 0).toLocaleString() }}
          </div>
          <div class="title">设备总数</div>
        </div>
      </div>
      <div class="pie-legend">
        <div class="legend flex">
          <div class="name">运行中</div>
          <div></div>
          <div class="value">
            {{ Number(dataSource.runTotal || 0).toLocaleString() }}
            <span>台</span>
          </div>
        </div>
        <div class="legend flex">
          <div class="name">已停止</div>
          <div></div>
          <div class="value">
            {{ Number(dataSource.stopTotal || 0).toLocaleString() }}
            <span>台</span>
          </div>
        </div>
        <div class="legend flex">
          <div class="name">待机中</div>
          <div></div>
          <div class="value">
            {{ Number(dataSource.waitTotal || 0).toLocaleString() }}
            <span>台</span>
          </div>
        </div>
        <div class="legend flex">
          <div class="name">故障</div>
          <div></div>
          <div class="value">
            {{ Number(dataSource.faultTotal || 0).toLocaleString() }}
            <span>台</span>
          </div>
        </div>
      </div>
      <div class="chart-dom" ref="drawerPieChart"></div>
    </div>
    <div class="right-warp">
      <div class="table-container">
        <div class="header">
          <div class="name">设备名称</div>
          <div class="status">设备状态</div>
          <div class="area">区域</div>
        </div>
        <div class="body">
          <div
            class="tr"
            v-for="(item, index) in equListSource"
            :key="index"
            :class="statusClass(item.equStatus)"
          >
            <div class="name">{{ item.equName }}</div>
            <div class="status">● {{ item.equStatus | getEquStatusName }}</div>
            <div class="area">{{ item.region || "-" }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginData } from "@/tools";
import { equList, equStatistics } from "@/api/wisdom-beam/home";
export default {
  data() {
    return {
      loading: false,
      equListSource: [],
      dataSource: {},
      chartPie: null,
    };
  },
  filters: {
    getEquStatusName(val) {
      switch (Number(val)) {
        case 1:
          return "已停止";

        case 2:
          return "待机中";

        case 3:
          return "运行中";

        case 4:
          return "故障";
        default:
          return "--";
      }
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      Promise.all([this.equStatistics(), this.equList()]).finally((_) => {
        this.loading = false;
        this.$nextTick(() => {
          this.drawerPieChart();
        });
      });
    },

    //设备列表
    equList() {
      let { tenantCode } = getLoginData();
      return new Promise((resolve, reject) => {
        equList({ tenantCode })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? [];
            this.equListSource = source;
            resolve();
          })
          .catch((_) => {
            this.equListSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    //设备统计
    equStatistics() {
      let { tenantCode } = getLoginData();
      return new Promise((resolve, reject) => {
        equStatistics({ tenantCode })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? {};
            this.dataSource = source;
            resolve();
          })
          .catch((_) => {
            this.dataSource = {};
            reject();
          })
          .finally((_) => {});
      });
    },

    drawerPieChart() {
      let chart_dom = this.$refs["drawerPieChart"];
      this.chartPie = this.$echarts.init(chart_dom);

      let chartData = [
        { value: this.dataSource?.runTotal ?? 0, name: "运行中" },
        { value: this.dataSource?.stopTotal ?? 0, name: "已停止" },
        { value: this.dataSource?.waitTotal ?? 0, name: "待机中" },
        { value: this.dataSource?.faultTotal ?? 0, name: "故障" },
      ];
      // 颜色系列
      let colorList = ["#1CCD89", "#3CA5EF", "#FFA801", "#FB5454"];
      //总数
      let sum = chartData.reduce((per, cur) => per + cur.value, 0);
      let seriesData = [];
      chartData.forEach((item, i) => {
        seriesData.push({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: colorList[i],
          },
        });
        //空格
        seriesData.push({
          name: "gap",
          value: sum / 200,
          itemStyle: { color: "transparent" },
        });
      });
      let option = {
        tooltip: {
          borderWidth: 0,
          padding: [10, 30, 10, 20],
          axisPointer: {
            type: "shadow",
          },
          confine: true,
          trigger: "item",
          formatter(params) {
            let res = "";
            const { marker, name, value } = params;
            if (name !== "gap") {
              res += `${marker}${name}:${value}`;
            }
            return res;
          },
        },
        series: [
          {
            name: "年度",
            type: "pie",
            radius: ["41%", "50%"],
            center: ["25%", "62%"],
            label: {
              show: false,
            },
            data: seriesData,
          },
        ],
      };
      this.chartPie.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.chartPie.resize();
      });
    },
    statusClass(val) {
      switch (Number(val)) {
        case 1:
          return "stop";

        case 2:
          return "wating";

        case 3:
          return "ing";

        case 4:
          return "error";
        default:
          return "--";
      }
    },
  },
  destroyed() {
    this.chartPie && this.chartPie.dispose();
  },
};
</script>

<style lang="less" scoped>
.device-manage-container {
  height: 100%;
  width: 100%;
  .flex();
  .unit {
    position: absolute;
    color: #666666;
    font-size: 14px;
    top: 60px;
    left: 16px;
  }
  .left-warp {
    width: 420px;
    height: 100%;
    flex-shrink: 0;
    position: relative;
    .pie-legend {
      position: absolute;
      left: 200px;
      top: 85px;
      .legend {
        height: 40px;
        border-radius: 4px;
        padding: 0 12px 0 20px;
        margin-bottom: 10px;
        align-items: center;
        font-size: 14px;
        div {
          &:nth-child(2) {
            width: 39px;
            height: 1px;
            border-bottom: 1px dashed #3ca5ef;
            opacity: 0.5;
            margin: 0 10px;
          }
          &.value {
            font-size: 24px;
            margin-left: auto;
            span {
              font-size: 14px;
              margin-left: -4px;
              color: #666666 !important;
            }
          }
        }
        &:nth-child(1) {
          background: url("https://jszhgd.cn/static/pc/beamyard/arrow_3.png")
            no-repeat left center;
          .value {
            color: #1ccd89;
          }
        }
        &:nth-child(2) {
          background: url("https://jszhgd.cn/static/pc/beamyard/arrow_1.png")
            no-repeat left center;
          .value {
            color: #3ca5ef;
          }
        }
        &:nth-child(3) {
          background: url("https://jszhgd.cn/static/pc/beamyard/arrow_2.png")
            no-repeat left center;
          .value {
            color: #ffa801;
          }
        }
        &:nth-child(4) {
          background: url("https://jszhgd.cn/static/pc/beamyard/arrow_4.png")
            no-repeat left center !important;
          .value {
            color: #fb5454;
          }
          div {
            &:nth-child(2) {
              border-color: #fb5454;
              margin-left: 23px;
            }
          }
        }
      }
    }
    .chart-dom {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .chart-outer-warp {
      width: 182px;
      height: 182px;
      top: 92px;
      left: 0px;
      transform: translate(0, 0);
      position: absolute;
      .pie-value {
        position: absolute;
        font-size: 22px;
        color: #0068b7;
        width: 100%;
        text-align: center;
        z-index: 99;
        top: 50%;
        left: 56%;
        transform: translate(-50%, -50%);
        .title {
          font-size: 14px;
          text-align: center;
          color: #666666;
        }
      }
    }
  }
  .right-warp {
    height: 100%;
    flex: 1;
    box-sizing: border-box;
    padding: 80px 20px 30px 0px;
    .table-container {
      height: 100%;
      overflow: hidden;
      .flex();
      flex-direction: column;
      border: 1px solid #dcdee2;
      .header {
        .flex();
        font-size: 14px;
        color: #2b2c30;
        font-weight: bold;
        padding: 10px 10px 10px 0;
        border-bottom: 1px solid #dcdee2;
        .name {
          flex: 1;
          padding-left: 20px;
          flex-shrink: 0;
        }
        .status {
          width: 80px;
          flex-shrink: 0;
        }
        .area {
          width: 120px;
          flex-shrink: 0;
        }
      }
      .body {
        height: 100%;
        flex: 1;
        .custom-scrollbar();
        overflow: overlay !important;
        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 8px;
          height: 8px;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          background: #cccccc;
        }
        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          border-radius: 10px;
          background: #eeeeee;
        }
        .tr {
          font-size: 14px;
          color: #333333;
          .flex();
          height: 40px;
          align-items: center;
          border-bottom: 1px solid #dcdee2;
          &:last-of-type {
            border-bottom: 0;
          }
          &.error {
            .icon {
              &::before {
                background: #fb5454;
                box-shadow: 0 0 10px #fb5454;
              }
            }
            .status {
              color: #fb5454;
            }
          }
          &.wating {
            .icon {
              &::before {
                background: #ffa801;
                box-shadow: 0 0 10px #ffa801;
              }
            }
            .status {
              color: #ffa801;
            }
          }
          &.stop {
            .icon {
              &::before {
                background: #3ca5ef;
                box-shadow: 0 0 10px #3ca5ef;
              }
            }
            .status {
              color: #3ca5ef;
            }
          }
          &.ing {
            .icon {
              &::before {
                background: #1ccd89;
                box-shadow: 0 0 10px #1ccd89;
              }
            }
            .status {
              color: #1ccd89;
            }
          }

          .name {
            padding-left: 20px;
            flex: 1;
            flex-shrink: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .status {
            width: 80px;
            flex-shrink: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .area {
            width: 120px;
            flex-shrink: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
